<template>
    <div>
        <div class="breadcrumb">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/admin' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>运营管理</el-breadcrumb-item>
                <el-breadcrumb-item>采购管理</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div>
            <div style="margin-bottom: 15px;">
                <el-row>
                    <el-col :span="2">
                        <div>
                            <el-button type="success" size="small" icon="el-icon-circle-plus-outline"
                                       @click="dialogFormVisible = true">添加
                            </el-button>
                        </div>
                    </el-col>
                    <el-col :span="7" :offset="15">
                        <div>

                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div></div>
                    </el-col>
                </el-row>
            </div>
            <div>
                <el-table
                        :data="tableData"
                        border
                        style="width: 100%;">
                    <el-table-column
                            prop="title"
                            label="合同名称"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="product"
                            label="产品"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="supplier"
                            label="供应商">
                    </el-table-column>
                    <el-table-column
                            prop="tel"
                            label="联系电话">
                    </el-table-column>

                    <el-table-column
                            width="150"
                            prop="signingTime"
                            label="签订时间">
                    </el-table-column>


                    <el-table-column
                            width="100"
                            prop="manager"
                            label="经办人">
                    </el-table-column>
                    <el-table-column label="操作" width="200" align="center">
                        <template slot-scope="scope">
                            <el-button
                                    icon="el-icon-edit"
                                    type="primary"
                                    size="mini"
                                    @click="handleEdit(scope.$index, scope.row)">编辑
                            </el-button>
                            <el-button
                                    icon="el-icon-delete"
                                    size="mini"
                                    type="danger"
                                    @click="handleDelete(scope.$index, scope.row)">删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div style="margin-top: 15px;float: right;">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-sizes="[5, 10, 20, 50,100]"
                        :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total"
                        background>
                </el-pagination>
                <div style="clear:both;"></div>
            </div>
        </div>

        <el-dialog title="添加" :visible.sync="dialogFormVisible" append-to-body="append-to-body" width="40%">
            <el-form :model="form">
                <el-form-item label="合同名称" label-width="80px">
                    <el-input v-model="form.title" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="产品名称" label-width="80px">
                    <el-input v-model="form.product" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="供应商" label-width="80px">
                    <el-input v-model="form.supplier" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="联系电话" label-width="80px">
                    <el-input v-model="form.tel" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="生效时间" label-width="80px">
                    <el-input v-model="form.signingTime" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="经办人" label-width="80px">
                    <el-input v-model="form.manager" autocomplete="off"></el-input>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="insert">确 定</el-button>
                <el-button @click="dialogFormVisible = false;">取 消</el-button>
            </div>
        </el-dialog>

        <el-dialog title="编辑" :visible.sync="dialogEditVisible" append-to-body="append-to-body" width="40%">
            <el-form :model="updateDate">
                <el-form-item label="合同名称" label-width="80px">
                    <el-input v-model="updateDate.title" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="产品名称" label-width="80px">
                    <el-input v-model="updateDate.product" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="供应商" label-width="80px">
                    <el-input v-model="updateDate.supplier" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="联系电话" label-width="80px">
                    <el-input v-model="updateDate.tel" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="生效时间" label-width="80px">
                    <el-input v-model="updateDate.signingTime" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="经办人" label-width="80px">
                    <el-input v-model="updateDate.manager" autocomplete="off"></el-input>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="update">确 定</el-button>
                <el-button @click="dialogEditVisible = false;">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import MainTitle from "@/components/MainTitle";
    import {deleteP, insert, queryAll, queryById, update} from "@/api/admin/operate";
    import {deleteUserById} from "@/api/admin/department";

    export default {
        name: "Purchase",
        components: {
            MainTitle
        },
        mounted() {
            this.queryAll();
        },
        data() {
            return {
                searchValue: "",
                tableData: [],
                currentPage: 1,
                pageSize: 10,
                total: 0,
                dialogFormVisible: false,
                dialogEditVisible: false,
                form: {
                    title: "",
                    product: "",
                    supplier: "",
                    tel: "",
                    signingTime: "",
                    state: "0",
                    manager: "",
                },
                updateDate: {
                    id: '',
                    title: "",
                    product: "",
                    supplier: "",
                    tel: "",
                    signingTime: "",
                    state: "0",
                    manager: "",
                },
            }
        },
        methods: {
            handleEdit(index, row) {
                this.dialogEditVisible = true;
                queryById(row.id).then(resp => {
                    this.updateDate = resp.data
                });
            },
            handleDelete(index, row) {
                this.deleteP(row.id);
            },
            handleSizeChange(val) {
                //console.log(`每页 ${val} 条`);
                this.pageSize = val;
                this.queryAll();

            },
            handleCurrentChange(val) {
                //console.log(`当前页: ${val}`);
                this.currentPage = val;
                this.queryAll();

            },
            queryAll() {
                queryAll(this.currentPage, this.pageSize).then(resp => {
                    //console.log(resp)
                    this.tableData = resp.data.purchase;
                    this.total = resp.data.total;
                    this.currentPage = resp.data.current;
                    this.pageSize = resp.data.size;
                })
            },
            insert() {
                let flag = true;
                Object.values(this.form).forEach(value => {
                    if (value == "") {
                        flag = false;
                    }
                });
                if (!flag) {
                    this.$message.warning("任何一项不能为空！");
                    return false;
                }
                insert(this.form.title, this.form.product, this.form.supplier, this.form.tel, this.form.signingTime, this.form.state, this.form.manager)
                    .then(resp => {
                        //console.log(resp);
                        if (resp.code == 0) {
                            this.$message.success("添加成功！");
                            this.queryAll();
                            this.dialogFormVisible = false;
                        } else {
                            this.$message.error("添加失败！");
                        }
                    })
            },
            update() {
                update(this.updateDate.id, this.updateDate.title, this.updateDate.product, this.updateDate.supplier, this.updateDate.tel, this.updateDate.signingTime, this.updateDate.state, this.updateDate.manager)
                    .then(resp => {
                        if (resp.code == 0) {
                            this.$message.success("修改成功！");
                            this.queryAll();
                            this.dialogEditVisible = false;
                        } else {
                            this.$message.error("修改失败！");
                        }
                    })
            },
            deleteP(id) {
                this.$confirm('此操作将删除合同, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    deleteP(id).then(resp => {
                        if (resp.code === 0) {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.queryAll();
                        } else {
                            this.$message({
                                type: 'error',
                                message: '删除失败!'
                            });
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            }

        },
        watch: {}
    }
</script>

<style scoped>

</style>